<template>
  <div>
    <CommentMain
      v-for="item in commentList"
      :key="item.id"
      :commentData="item"
    />
  </div>
</template>

<script>
import CommentMain from "@/components/Comment/Main";
export default {
  components: {
    CommentMain,
  },
  data() {
    return {
      commentList: [
        //第一阶段-普通的类表渲染
        { id: 1, content: "老铁没毛病" },
        { id: 2, content: "老铁扎心了" },
        { id: 3, content: "看了个寂寞" },
        { id: 4, content: "愣着干嘛，扣6" },
        { id: 5, content: "从前有座山" },
        //在主评论中第一次渲染父评论组件，准备一个 parent 属性
        {
          id: 6,
          content: "山里有座庙",
          parent: { id: 5, content: "从前有座山" },
        },
        {
          id: 7,
          content: "你懂个啥寂寞",
          parent: { id: 3, content: "看了个寂寞" },
        },
        //真正递归从这里开始，其实 parent 都是复制之前写好的
        {
          id: 8,
          content: "庙里有个小和尚",
          parent: {
            id: 6,
            content: "山里有座庙",
            // 被回复的父评论
            parent: { id: 5, content: "从前有座山" },
          },
        },
        {
          id: 9,
          content: "老和尚对小和尚说",
          parent: {
            id: 8,
            content: "庙里有个小和尚",
            parent: {
              id: 6,
              content: "山里有座庙",
              // 被回复的父评论
              parent: { id: 5, content: "从前有座山" },
            },
          },
        },
      ],
    };
  },
};
</script>

<style>
</style>